<template>
	<view class="cash-container">
		<!-- 提现金额输入区域 -->
		<view class="amount-section">
			<view class="amount-title">提现金额</view>
			<view class="amount-input-wrap">
				<text class="currency-symbol">¥</text>
				<input 
					type="digit"
					v-model="amount"
					class="amount-input"
					placeholder="请输入提现金额"
					@input="handleInput"
				/>
			</view>
			<view class="amount-tips">
				<text>可提现金额: ¥{{balance}}</text>
				<text class="all-btn" @click="handleAll">全部提现</text>
			</view>
		</view>
		
		<!-- 提现到微信 -->
		<!-- <view class="withdraw-to">
			<view class="section-title">提现到</view>
			<view class="wx-account">
				<image src="/static/wechat.png" class="wx-icon"></image>
				<text>微信零钱</text>
			</view>
		</view> -->
		
		<!-- 提示说明 -->
		<view class="tips-section">
			<view class="tip-item" v-for="(tip, index) in tips" :key="index">· {{tip}}</view>
		</view>
		
		<!-- 提现按钮 -->
		<view 
			class="submit-btn" 
			:class="{'disabled': !canSubmit}"
			@click="handleSubmit"
		>
			确认提现
		</view>
	</view>
</template>

<script>
import request from '@/utils/request'

export default {
	data() {
		return {
			amount: '', // 提现金额
			balance: '0', // 可提现余额
			tips: [], // 提示信息
			submitting: false // 提交状态
		}
	},
	computed: {
		canSubmit() {
			const amount = Number(this.amount)
			return !this.submitting && amount >= 1 && amount <= Number(this.balance.replace(',', ''))
		}
	},
	onShow() {
		this.getCashInfo()
	},
	methods: {
		// 获取提现信息
		async getCashInfo() {
			try {
				const res = await request({
					url: '/wechat/cash/cashInfo'
				})
				
				if (res.code === 0 && res.data) {
					// 设置余额
					this.balance = String(res.data.amount)
					// 保存提示信息
					this.tips = res.data.cash_tips || []
				}
			} catch (err) {
				console.error('获取提现信息失败', err)
				uni.showToast({
					title: '获取提现信息失败',
					icon: 'none'
				})
			}
		},
		
		// 处理输入，限制只能输入数字和小数点
		handleInput(e) {
			const value = e.detail.value
			// 只允许输入整数
			if (value && !/^\d*$/.test(value)) {
				this.amount = value.substring(0, value.length - 1)
			}
		},
		
		// 全部提现
		handleAll() {
			this.amount = this.balance
		},
		
		// 提交提现
		async handleSubmit() {
			if (!this.canSubmit) return
			
			const amount = Number(this.amount)
			
			// 验证金额是否为整数
			if (!Number.isInteger(amount)) {
				uni.showToast({
					title: '提现金额必须为整数',
					icon: 'none'
				})
				return
			}
			
			// 验证金额是否超过可提现金额
			if (amount > Number(this.balance)) {
				uni.showToast({
					title: '超出可提现金额',
					icon: 'none'
				})
				return
			}
			
			// 设置提交状态
			this.submitting = true
			
			uni.showLoading({
				title: '提交中'
			})
			
			try {
				const res = await request({
					url: '/wechat/cash/toCash',
					data: { amount }
				})
				
				if (res.code === 0) {
					uni.showToast({
						title: res.message || '提现申请已提交',
						icon: 'success'
					})
					
					// 延迟跳转到提现记录页面
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/wallet/cash-list'
						})
					}, 2000)
				} else {
					throw new Error(res.message || '提现失败')
				}
			} catch (err) {
				uni.showToast({
					title: err.message || '提交失败，请重试',
					icon: 'none'
				})
				// 重置提交状态
				this.submitting = false
			} finally {
				uni.hideLoading()
			}
		}
	}
}
</script>

<style>
.cash-container {
	min-height: 100vh;
	background-color: #f8f8f8;
	padding: 20rpx;
}

.amount-section {
	background-color: #ffffff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
}

.amount-title {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 30rpx;
}

.amount-input-wrap {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #eee;
}

.currency-symbol {
	font-size: 48rpx;
	font-weight: bold;
	margin-right: 20rpx;
    color: #444;
}

.amount-input {
	flex: 1;
	font-size: 48rpx;
    color: #333;
}

.amount-tips {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 20rpx;
	font-size: 24rpx;
	color: #999;
}

.all-btn {
	color: #007AFF;
}

.withdraw-to {
	background-color: #ffffff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
}

.section-title {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 20rpx;
}

.wx-account {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
}

.wx-icon {
	width: 48rpx;
	height: 48rpx;
	margin-right: 20rpx;
}

.tips-section {
	padding: 30rpx;
}

.tip-item {
	font-size: 24rpx;
	color: #999;
	line-height: 1.8;
}

.submit-btn {
	position: fixed;
	bottom: 40rpx;
	left: 20rpx;
	right: 20rpx;
	height: 90rpx;
	background: linear-gradient(135deg, #2b85ff, #5ea4ff);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 45rpx;
	font-size: 32rpx;
	transition: all 0.3s;
}

.submit-btn:active {
	transform: scale(0.98);
	opacity: 0.9;
}

.submit-btn.disabled {
	background: #cccccc;
	transform: none;
	opacity: 1;
}
</style>
